<template>
  <n-infinite-scroll
    class="project-cards-list p-2"
    :distance="10"
    @load="handleLoad"
  >
    <n-card
      embedded
      hoverable
      :bordered="false"
      content-class="!p-2"
      class="cursor-pointer"
      @click="showCreateModal = true"
    >
      <div
        class="new-container h-full min-h-200px flex flex-col justify-center items-center b-1 b-dashed b-rd-1"
      >
        <span class="text-16 color-#fff">🫵</span>
        <p>新建项目</p>
      </div>
    </n-card>

    <n-card hoverable v-for="project in data" :key="project.id">
      <template #cover>
        <n-skeleton
          v-if="loadingProjectId === Number(project.id)"
          height="100%"
          width="100%"
        />
        <template v-else>
          <div class="absolute top-10px right-10px z-10">
            <n-tag type="success" :bordered="false">
              {{ project.projectType === 0 ? "Web3D" : "WebGIS" }}
            </n-tag>
            <n-tag type="success" :bordered="false" class="ml-5px">
              {{ project.sceneType }}
            </n-tag>
          </div>

          <n-image
            preview-disabled
            object-fit="cover"
            :src="
              getServiceStaticFile(project.coverPicture) ||
              '/static/images/carousel/Astral3DEditor.png'
            "
            class="w-full h-220px cursor-pointer hover:transform-scale-140 transition-all-200"
            @click="editScene(project.id)"
          />
        </template>
      </template>

      <template #action>
        <n-skeleton
          v-if="loadingProjectId === Number(project.id)"
          text
          :repeat="1"
        />
        <CardAction
          v-show="loadingProjectId !== Number(project.id)"
          :data="project"
          @refresh="refresh"
          @setLoadingProjectId="setLoadingProjectId"
        />
      </template>
    </n-card>

    <div v-if="loadMore" class="text-center" style="grid-column: 1 / -1">
      {{ t("home.Loading") }}...
    </div>
    <div v-else-if="!noMore" class="text-center" style="grid-column: 1 / -1">
      {{ t("home.Scroll to load more") }} 😽😽😽
    </div>
    <div v-else class="text-center" style="grid-column: 1 / -1">
      {{ t("home.No more") }} 🤪
    </div>
  </n-infinite-scroll>

  <CreateProject v-model:visible="showCreateModal" @refresh="refresh" />
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { t } from "@/language";
import { fetchGetAllScenes } from "@/http/api/scenes";
import CardAction from "@/views/home/project/components/CardAction.vue";
import CreateProject from "@/views/home/project/components/CreateProject.vue";
import { getServiceStaticFile } from "@/utils/common/file";

const data = ref([]);
let paginationReactive = reactive({
  page: 0,
  pageSize: 10,
  pageCount: 1,
});
const loadMore = ref(false);
const noMore = ref(false);
const showCreateModal = ref(false);
const loadingProjectId = ref(-1);

async function handleLoad() {
  if (noMore.value) return;

  loadMore.value = true;
  const res = await fetchGetAllScenes({
    offset: paginationReactive.page * paginationReactive.pageSize,
    limit: paginationReactive.pageSize,
    sortby: "updateTime",
    order: "desc",
    query: ``,
  });
  if (res.data === null) return;

  data.value.push(...(res.data.items || []));
  paginationReactive.pageCount = res.data.pages;
  paginationReactive.page++;
  loadMore.value = false;

  if (paginationReactive.page >= paginationReactive.pageCount)
    noMore.value = true;
}

async function refresh() {
  data.value = [];

  loadMore.value = true;
  const res = await fetchGetAllScenes({
    offset: 0,
    limit: paginationReactive.page * paginationReactive.pageSize,
    sortby: "updateTime",
    order: "desc",
    query: ``,
  });
  if (res.data === null) return;

  data.value.push(...(res.data.items || []));
  paginationReactive.pageCount = res.data.pages;
  loadMore.value = false;

  if (paginationReactive.page >= paginationReactive.pageCount)
    noMore.value = true;
}

function setLoadingProjectId(id) {
  loadingProjectId.value = id;
}

// 编辑场景
function editScene(id) {
  window.open(window.location.origin + "/#/editor/" + id, "_blank");
}

onMounted(() => {
  handleLoad();
});
</script>

<style lang="less">
.project-cards-list {
  height: calc(100% - 2rem - var(--n-pane-padding-top));

  .n-scrollbar-content {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-flow: row dense;

    .new-container {
      border-color: var(--n-border-color);
      color: var(--n-close-icon-color);
    }

    .n-card-cover {
      height: 220px;
    }
  }
}
</style>
